<template>
    <div class="container">
      <vxe-table
        border
        resizable
        max-height="400"
        align="center"
        auto-resize
        :span-method="mergeColumn"
        :scroll-y="{enabled: false}"
        :data="goodListData">
        <vxe-table-column field="serial" type="seq" width="60" title="序号"></vxe-table-column>
        <vxe-table-column field="goodsName" title="商品名称"></vxe-table-column>
        <vxe-table-column field="goodCode" title="商品编码"></vxe-table-column>
        <vxe-table-column field="goodsBarCode" title="商品条码"></vxe-table-column>
        <vxe-table-column field="goodsUnitName" title="单位" width="60"></vxe-table-column>
        <vxe-table-column field="totalPlanQuantity" title="计划数量"></vxe-table-column>
        <vxe-table-column field="distributionQuantity" title="分配数量"></vxe-table-column>
        <vxe-table-column field="pickingQuantity" title="已拣货数量"></vxe-table-column>
        <vxe-table-column field="locationName" title="分配库位"></vxe-table-column>
        <vxe-table-column field="goodsStatusName" title="库存状态"></vxe-table-column>
        <vxe-table-column field="gmtManufacture" title="生产日期"></vxe-table-column>
        <vxe-table-column field="remarks" title="备注"></vxe-table-column>
        <vxe-table-column title="操作" fixed="right" width="80" v-if=" operation != 'detail' ">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="缺货" placement="top">
              <vxe-button type="text" @click="outOfStock(scope.row.inventoryCode,scope.row.oldInventoryCode)">
                <i class="el-icon-document" />
              </vxe-button>
            </el-tooltip>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-modal v-model="operationModel" title="缺货" width="1200" height="630" destroy-on-close>
        <vxe-table
          border
          resizable
          ref="xTable"
          height="500"
          align="center"
          :scroll-y="{enabled: false}"
          :data="tableData2"
          :edit-rules="validRules"
          :edit-config="{trigger: 'click', mode: 'cell'}"
        >
          <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
          <vxe-table-column field="deliveryCode" title="订单号"></vxe-table-column>
          <vxe-table-column field="isvCode" title="原始单号"></vxe-table-column>
          <vxe-table-column field="logisticsName" title="销售平台"></vxe-table-column>
          <!-- <vxe-table-column field="customerName" title="收货客户"></vxe-table-column> -->
          <vxe-table-column field="goodsName" title="商品名称"></vxe-table-column>
          <vxe-table-column field="distributionQuantity" title="分配数量"></vxe-table-column>
          <vxe-table-column field="refundQuantity" title="缺货数量" :cell-render="{name: 'input', attrs: {type: 'integer'}}"></vxe-table-column>
          <!-- <vxe-table-column field="refundQuantity" title="缺货数量">
            <template v-slot="{ row }">
              <vxe-input type="number" v-model="row.refundQuantity"></vxe-input>
            </template>
          </vxe-table-column> -->
          <!-- <vxe-table-column field="refundQuantity" title="缺货数量" :cell-render="{name: 'input', defaultValue: '0'}"/> -->
        </vxe-table>
        <el-button class="btn-ok" type="primary" @click.native="save">保  存</el-button>
      </vxe-modal>
    </div>
</template>

<script>
import Qs from 'qs'
import {
  stockOut,
  queryPickingRigisters,
  queryListByInventoryCode
} from '@/api/outStorage'
export default {
  name: 'GoodList',
  components:{},
  props:{
    goodListData: {
      type: Array,
      required: true
    },
    operation: {
      type: String,
      default: 'edit'
    },
  },
  data () {
    return {
      code: this.$route.query.code,
      tableData: [],
      tableData2: [],
      loading: false,
      inventoryCode: '',
      oldInventoryCode: '',
      operationModel: false,
      validRules: {
        refundQuantity: [
          { pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d{0,6})$/, message: '小数点后保留六位小数' },
        ]
      },
      spanArr: [], //合并使用数组
      pos: '',
      mergeSpan: [
        {
          fields: ['serial', 'goodCode', 'goodsName', 'goodsBarCode', 'goodsUnitName'], // 要合并的列表
          conditions: ['goodCode', 'goodsName', 'goodsBarCode', 'goodsUnitName']        // 数据一样才进行合并
        }
      ]
    }
  },
  methods: {
    modelShowHide() {
      this.operationModel = !this.operationModel
    },
    // 商品列表
    // getGoodList() {
    //   this.loading = true
    //   queryPickingRigisters(this.code).then(response => {
    //     this.loading = false
    //     this.tableData = response.data
    //   })
    // },
    // 缺货-列表
    outOfStock(inventoryCode, oldInventoryCode) {
      this.loading = true
		  const parms = {
        inventoryCode,
        oldInventoryCode,
        wavePickingCode: this.$route.query.wavePickingCode
      }
      this.inventoryCode = inventoryCode
      queryListByInventoryCode('picking', Qs.stringify(parms)).then(response => {
        this.loading = false
        this.tableData2 = response.data
        this.modelShowHide()
      })
    },
    // 缺货
    save() {
      this.$refs.xTable.validate((valids) => {
        if (valids) {
          const parm = {
            entitys: this.tableData2,
            inventoryCode: this.inventoryCode,
            wavePickingCode: this.$route.query.wavePickingCode
          }
          stockOut(parm).then(response => {
            this.modelShowHide()
            this.$emit('refresh')
            this.$emit('orderListRef','1')
          })
        } else {
          return false
        }
      })
    },

    // 根据（conditions）条件合并表格（fields）列
    mergeColumn({ row, rowIndex, column, data }) {
      if (this.mergeSpan && this.goodListData.length > 0) {
        let currentValue = '' // 合并的条件集
        let fields = [] // 要合并的列
        let conditions = [] // 合并条件（数据一样才进行合并）
        this.mergeSpan.forEach((item) => {
          if (item.fields.includes(column.property)) {
            fields = item.fields
            conditions = item.conditions
            currentValue = conditions.map(key => row[key]).join('')
          }
        })
        let cellValue = row[column.property]
        if (fields.includes(column.property)) {
          let prevRow = data[rowIndex - 1]
          let nextRow = data[rowIndex + 1]
          let flag = ''
          if (prevRow) flag = conditions.map(key => prevRow[key]).join('')
          if (prevRow && prevRow[column.property] === cellValue && flag === currentValue) {
            return { rowspan: 0, colspan: 0 }
          } else {
            let countRowspan = 1
            let flag = ''
            if (nextRow) flag = conditions.map(key => nextRow[key]).join('')
            while (nextRow && nextRow[column.property] === cellValue && flag === currentValue) {
              nextRow = data[++countRowspan + rowIndex]
              if (nextRow) {
                flag = conditions.map(key => nextRow[key]).join('')
              } else {
                flag = ''
              }
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        }
      }
    },
  }
}
</script>
<style scoped>
.btn-ok{
  float: right;
  margin-top: 20px;
}
</style>
